* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #00aaff;
}

.bgg {
  position: fixed;
  display: grid;
  align-content: center;
  z-index: 1;
  height: 100vh;
  left: 50%;
  margin-left: -315px;
}
.bgg li.sphere {
  width: 650px;
  height: 650px;
  background: radial-gradient(rgba(2, 0, 36, 0.5) 47%, rgba(108, 108, 142, 0.7) 51%, rgba(171, 171, 255, 0.7) 52%, #00aaff 53%);
}

ul {
  list-style-type: none;
}

.tree {
  z-index: 2;
  position: fixed;
  left: 50%;
  margin-left: -160px;
  display: grid;
  height: 97vh;
  align-content: center;
  grid-template-areas: ". tree-top ." ". tree-middle ." ". tree-bottom ." ". tree-stem .";
  grid-template-columns: 100px auto 100px;
  transform: rotateY(50deg) scaley(1.5);
}
.tree > li {
  position: relative;
  display: block;
}
.tree .top, .tree .top-star {
  grid-area: tree-top;
}
.tree .top li, .tree .top-star li {
  border-color: green;
}
.tree .top-star {
  grid-area: tree-top;
  width: 130px;
  height: 55px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  top: -48px;
  z-index: 10;
  left: 4px;
  background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 38%, rgba(255, 242, 173, 0.2) 58%, rgba(255, 255, 255, 0.1) 100%);
  animation: starLight 3s ease-out infinite;
}
.tree .middle {
  grid-area: tree-middle;
}
.tree .bottom {
  grid-area: tree-bottom;
}
.tree .stem {
  grid-area: tree-stem;
}
.tree .tree-pts {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.tree .tree-pts .pts {
  top: 0;
  position: absolute;
}

.tree li:nth-of-type(1) .pts {
  border-left: 10px solid #00ff00;
  z-index: calc(8 - 1);
}

.tree li:nth-of-type(2) .pts {
  border-left: 10px solid #55ff00;
  z-index: calc(8 - 2);
}

.tree li:nth-of-type(3) .pts {
  border-left: 10px solid #55ff00;
  z-index: calc(8 - 3);
}

.tree li:nth-of-type(4) .pts {
  border-left: 10px solid #18af18;
  z-index: calc(8 - 4);
}

.tree li:nth-of-type(5) .pts {
  border-left: 10px solid #179517;
  z-index: calc(8 - 5);
}

.tree li:nth-of-type(6) .pts {
  border-left: 10px solid #1b901b;
  z-index: calc(8 - 6);
}

.tree li:nth-of-type(7) .stem {
  border-bottom-color: #1ea11e;
  z-index: calc(8 - 7);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(1) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(219.5deg) rotatey(28.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(2) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(218.5deg) rotatey(36.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(3) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(217.5deg) rotatey(44.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(4) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(216.5deg) rotatey(52.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(5) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(215.5deg) rotatey(60.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(6) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(214.5deg) rotatey(68.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(7) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(213.5deg) rotatey(76.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(8) {
  width: 1.7em;
  height: 2em;
  border-radius: 100% 0 0 0;
  transform: rotate(212.5deg) rotatey(84.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(9) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40.5deg) rotatey(28.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(10) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41.5deg) rotatey(37deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(11) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42.5deg) rotatey(45.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(12) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43.5deg) rotatey(54deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(13) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44.5deg) rotatey(62.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(14) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-45.5deg) rotatey(71deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(15) {
  width: 1.7em;
  height: 2em;
  border-radius: 0 0 0 100%;
  transform: rotate(-46.5deg) rotatey(79.5deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(1) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(220deg) rotatey(29deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(2) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(219deg) rotatey(37deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(3) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(218deg) rotatey(45deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(4) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(217deg) rotatey(53deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(5) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(216deg) rotatey(61deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(6) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(215deg) rotatey(69deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(7) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(214deg) rotatey(77deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(8) {
  width: 3.4em;
  height: 4em;
  border-radius: 100% 0 0 0;
  transform: rotate(213deg) rotatey(85deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(9) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40deg) rotatey(29deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(10) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41deg) rotatey(38deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(11) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42deg) rotatey(47deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(12) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43deg) rotatey(56deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(13) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44deg) rotatey(65deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(14) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-45deg) rotatey(74deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(15) {
  width: 3.4em;
  height: 4em;
  border-radius: 0 0 0 100%;
  transform: rotate(-46deg) rotatey(83deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(1) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(220.5deg) rotatey(29.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(2) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(219.5deg) rotatey(37.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(3) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(218.5deg) rotatey(45.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(4) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(217.5deg) rotatey(53.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(5) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(216.5deg) rotatey(61.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(6) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(215.5deg) rotatey(69.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(7) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(214.5deg) rotatey(77.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(8) {
  width: 5.1em;
  height: 6em;
  border-radius: 100% 0 0 0;
  transform: rotate(213.5deg) rotatey(85.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(9) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-39.5deg) rotatey(29.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(10) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40.5deg) rotatey(39deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(11) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41.5deg) rotatey(48.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(12) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42.5deg) rotatey(58deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(13) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43.5deg) rotatey(67.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(14) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44.5deg) rotatey(77deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(15) {
  width: 5.1em;
  height: 6em;
  border-radius: 0 0 0 100%;
  transform: rotate(-45.5deg) rotatey(86.5deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(1) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(221deg) rotatey(30deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(2) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(220deg) rotatey(38deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(3) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(219deg) rotatey(46deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(4) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(218deg) rotatey(54deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(5) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(217deg) rotatey(62deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(6) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(216deg) rotatey(70deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(7) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(215deg) rotatey(78deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(8) {
  width: 6.8em;
  height: 8em;
  border-radius: 100% 0 0 0;
  transform: rotate(214deg) rotatey(86deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(9) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-39deg) rotatey(30deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(10) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40deg) rotatey(40deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(11) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41deg) rotatey(50deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(12) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42deg) rotatey(60deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(13) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43deg) rotatey(70deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(14) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44deg) rotatey(80deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(15) {
  width: 6.8em;
  height: 8em;
  border-radius: 0 0 0 100%;
  transform: rotate(-45deg) rotatey(90deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(1) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(221.5deg) rotatey(30.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(2) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(220.5deg) rotatey(38.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(3) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(219.5deg) rotatey(46.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(4) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(218.5deg) rotatey(54.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(5) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(217.5deg) rotatey(62.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(6) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(216.5deg) rotatey(70.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(7) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(215.5deg) rotatey(78.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(8) {
  width: 8.5em;
  height: 10em;
  border-radius: 100% 0 0 0;
  transform: rotate(214.5deg) rotatey(86.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(9) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-38.5deg) rotatey(30.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(10) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-39.5deg) rotatey(41deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(11) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40.5deg) rotatey(51.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(12) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41.5deg) rotatey(62deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(13) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42.5deg) rotatey(72.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(14) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43.5deg) rotatey(83deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(15) {
  width: 8.5em;
  height: 10em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44.5deg) rotatey(93.5deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(1) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(222deg) rotatey(31deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(2) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(221deg) rotatey(39deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(3) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(220deg) rotatey(47deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(4) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(219deg) rotatey(55deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(5) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(218deg) rotatey(63deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(6) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(217deg) rotatey(71deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(7) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(216deg) rotatey(79deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(8) {
  width: 10.2em;
  height: 12em;
  border-radius: 100% 0 0 0;
  transform: rotate(215deg) rotatey(87deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(9) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-38deg) rotatey(31deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(10) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-39deg) rotatey(42deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(11) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-40deg) rotatey(53deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(12) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-41deg) rotatey(64deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(13) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-42deg) rotatey(75deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(14) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-43deg) rotatey(86deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(15) {
  width: 10.2em;
  height: 12em;
  border-radius: 0 0 0 100%;
  transform: rotate(-44deg) rotatey(97deg) translateX(4em);
}

.left {
  right: 50%;
  margin-right: -38px;
}

.right {
  left: 50%;
  margin-left: -38px;
}

.tree-stem .stem {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid green;
  margin: 0 auto;
}

.gift {
  position: absolute;
  width: 50px;
  height: 30px;
  margin: 5px;
  background-color: #ffc0cb;
  border: 1px dotted #42161e;
  z-index: 20;
  box-shadow: 1px -1px 2px #f5b0bc, 2px -2px 2px #e89daa, 3px -3px 2px #da8a98, 4px -4px 2px #ce7a89, 5px -5px 2px #bb6676, 6px -6px 2px #af5969, 7px -7px 2px #a04a5a, 8px -8px 2px #943e4e, 9px -9px 2px #803442, 10px -10px 2px #6b2834, 11px -11px 2px #541e28, 12px -12px 2px #42161e;
}

.g1 {
  left: -10px;
  top: 110px;
}

.g2 {
  left: 33px;
  top: 120px;
  height: 15px;
}

.g3 {
  left: 85px;
  top: 125px;
  width: 70px;
  height: 22px;
}

.g4 {
  left: -45px;
  top: 130px;
}

.g5 {
  left: 45px;
  top: 130px;
}

.g6 {
  left: 0px;
  top: 130px;
}

.g7 {
  left: 65px;
  top: 130px;
}

.g8 {
  left: 120px;
  top: 150px;
  height: 13px;
  width: 123px;
}

.g9 {
  left: 50px;
  top: 150px;
}

.shadow {
  width: 400px;
  height: 50px;
  background-color: rgba(42, 41, 68, 0.5);
  position: absolute;
  border-radius: 50%;
  top: 126px;
  left: -128px;
}

.toys {
  display: grid;
  position: absolute;
  gap: 5px;
  grid-template-columns: repeat(9, 20px);
  grid-template-rows: repeat(12, 20px);
  left: calc(50% - 100px);
  top: calc(50% - 135px);
  z-index: 2;
}
.toys .star {
  top: -30px;
  left: 10px;
  position: relative;
  border-right: 100px solid transparent;
  border-bottom: 70px solid gold;
  border-left: 100px solid transparent;
  transform: rotate(35deg) scale(0.2);
}
.toys .star:before {
  border-bottom: 80px solid gold;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  top: -45px;
  left: -65px;
  content: '';
  transform: rotate(-35deg);
}
.toys .star:after {
  position: absolute;
  top: 3px;
  left: -105px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid gold;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}
.toys .ball {
  width: 20px;
  height: 20px;
  background-color: #f00;
  border-radius: 50%;
  z-index: 1;
  position: absolute;
}
.toys .b1 {
  grid-area: 3 / 5;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: -5px;
  left: 10px;
}
.toys .b2 {
  grid-area: 4 / 4;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: -5px;
  left: -5px;
}
.toys .b3 {
  grid-area: 4 / 6;
  background-color: #ececec;
  box-shadow: -1px -1px 5px inset #615f5f, 1px 1px 8px inset #ffffff;
  top: -1px;
  left: 5px;
}
.toys .b4 {
  grid-area: 5 / 5;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: -8px;
  left: -3px;
}
.toys .b5 {
  grid-area: 6 / 2;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
}
.toys .b6 {
  grid-area: 6 / 4;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: -10px;
  left: -10px;
}
.toys .b7 {
  grid-area: 6 / 6;
  background-color: #ececec;
  box-shadow: -1px -1px 5px inset #615f5f, 1px 1px 8px inset #ffffff;
  top: -10px;
  left: -5px;
}
.toys .b8 {
  grid-area: 6 / 8;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: 2px;
  left: 5px;
}
.toys .b9 {
  grid-area: 7 / 1;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: 4px;
  left: 0px;
}
.toys .b10 {
  grid-area: 7 / 3;
  background-color: #ececec;
  box-shadow: -1px -1px 5px inset #615f5f, 1px 1px 8px inset #ffffff;
  top: 3px;
  left: 3px;
}
.toys .b11 {
  grid-area: 7 / 5;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: -10px;
  left: -10px;
}
.toys .b12 {
  grid-area: 7 / 7;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: -4px;
  left: 3px;
}
.toys .b13 {
  grid-area: 8 / 2;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: 8px;
  left: 0px;
}
.toys .b14 {
  grid-area: 8 / 4;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: 5px;
  left: 5px;
}
.toys .b15 {
  grid-area: 8 / 6;
  background-color: #ececec;
  box-shadow: -1px -1px 5px inset #615f5f, 1px 1px 8px inset #ffffff;
  top: -10px;
  left: -10px;
}
.toys .b16 {
  grid-area: 8 / 8;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: -3px;
  left: 17px;
}
.toys .b17 {
  grid-area: 9 / 1;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: 20px;
  left: 8px;
}
.toys .b18 {
  grid-area: 9 / 6;
  background-color: red;
  box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
  top: -5px;
  left: 20px;
}
.toys .b19 {
  grid-area: 9 / 10;
  background-color: #ececec;
  box-shadow: -1px -1px 5px inset #615f5f, 1px 1px 8px inset #ffffff;
  top: 26px;
  left: -30px;
}
.toys .b20 {
  grid-area: 8 / 10;
  background-color: gold;
  box-shadow: -1px -1px 5px inset #3a3101, 1px 1px 8px inset #ffffff;
  top: 24px;
  left: 0px;
}

.light {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
  animation: lights 3s ease-in infinite;
}

.l1 {
  grid-area: 2 / 5;
  top: 5px;
  left: 5px;
}

.l2 {
  grid-area: 3 / 4;
  animation-delay: 0.4s;
}

.l3 {
  grid-area: 3/ 5;
  top: -5px;
  left: -5px;
  animation-delay: 0.6s;
}

.l4 {
  grid-area: 3 / 5;
  top: 15px;
  left: 0px;
  animation-delay: 0.8s;
}

.l5 {
  grid-area: 2 / 5;
  top: 5px;
  left: 5px;
  animation-delay: 1s;
}

.l7 {
  grid-area: 4 / 5;
  top: 5px;
  left: 15px;
}

.l8 {
  animation-delay: 0.4s;
  grid-area: 5 / 7;
  top: -10px;
  left: 10px;
}

.l9 {
  animation-delay: 0.6s;
  grid-area: 5 / 6;
}

.l10 {
  animation-delay: 0.8s;
  grid-area: 5 / 3;
  top: -5px;
  left: 15px;
}

.l11 {
  animation-delay: 1s;
  grid-area: 5 / 4;
  top: 5px;
  left: 10px;
}

.l12 {
  grid-area: 6 / 5;
  left: 5px;
}

.l13 {
  animation-delay: 0.4s;
  grid-area: 6 / 7;
  left: 5px;
  top: 3px;
}

.l14 {
  animation-delay: 0.6s;
  grid-area: 7 / 6;
  left: 5px;
}

.l15 {
  animation-delay: 0.8s;
  grid-area: 6 / 3;
  top: 8px;
}

.l16 {
  animation-delay: 1s;
  grid-area: 7 / 4;
}

.l17 {
  grid-area: 8 / 5;
}

.l18 {
  animation-delay: 0.4s;
  grid-area: 9 / 6;
}

.l19 {
  animation-delay: 0.6s;
  grid-area: 8 / 7;
  top: 5px;
  left: 7px;
}

.l20 {
  animation-delay: 0.8s;
  grid-area: 8 / 2;
  top: -15px;
  left: 5px;
}

.l21 {
  animation-delay: 1s;
  grid-area: 8/ 3;
  left: 5px;
  top: 5px;
}

.l22 {
  animation-delay: 0.4s;
  grid-area: 7 / 8;
  top: 15px;
  left: 20px;
}

.l23 {
  animation-delay: 0.6s;
  grid-area: 9 / 1;
  left: 15px;
  top: 15px;
}

.l24 {
  animation-delay: 0.8s;
  grid-area: 9 / 3;
}

.l25 {
  animation-delay: 1s;
  grid-area: 9 / 8;
  top: 5px;
  left: 15px;
}

.l6 {
  grid-area: 2 / 5;
  top: 10px;
  left: 20px;
}

@keyframes starLight {
  0% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 38%, rgba(255, 242, 173, 0.2) 58%, rgba(255, 255, 255, 0.1) 100%);
  }
  15% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 37%, rgba(255, 242, 173, 0.2) 60%, rgba(255, 255, 255, 0.1) 100%);
  }
  25% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 36%, rgba(255, 242, 173, 0.2) 62%, rgba(255, 255, 255, 0.1) 100%);
  }
  35% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 35%, rgba(255, 242, 173, 0.2) 64%, rgba(255, 255, 255, 0.1) 100%);
  }
  50% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 34%, rgba(255, 242, 173, 0.2) 66%, rgba(255, 255, 255, 0.1) 100%);
  }
  65% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 35%, rgba(255, 242, 173, 0.2) 64%, rgba(255, 255, 255, 0.1) 100%);
  }
  75% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 35%, rgba(255, 242, 173, 0.2) 63%, rgba(255, 255, 255, 0.1) 100%);
  }
  85% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 36%, rgba(255, 242, 173, 0.2) 60%, rgba(255, 255, 255, 0.1) 100%);
  }
  100% {
    background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 38%, rgba(255, 242, 173, 0.2) 58%, rgba(255, 255, 255, 0.1) 100%);
  }
}
@keyframes lights {
  0% {
    box-shadow: 0 0 0px 0px #fff;
  }
  15% {
    box-shadow: 0 0 1px 1px #fff;
  }
  25% {
    box-shadow: 0 0 2px 2px #fff;
  }
  35% {
    box-shadow: 0 0 3px 3px #fff;
  }
  50% {
    box-shadow: 0 0 4px 4px #fff;
  }
  65% {
    box-shadow: 0 0 3px 3px #fff;
  }
  75% {
    box-shadow: 0 0 2px 2px #fff;
  }
  85% {
    box-shadow: 0 0 1px 1px #fff;
  }
  100% {
    box-shadow: 0 0 0px 0px #fff;
  }
}
@keyframes snow {
  0% {
    transform: rotate(0deg) translate(0, -vh);
  }
  5% {
    transform: rotate(45deg) translate(-3px, 5vh);
  }
  10% {
    transform: rotate(90deg) translate(-5px, 10vh);
  }
  15% {
    transform: rotate(120deg) translate(-3px, 15vh);
  }
  20% {
    transform: rotate(150deg) translate(-1px, 20vh);
  }
  25% {
    transform: rotate(180deg) translate(0, 25vh);
  }
  30% {
    transform: rotate(200deg) translate(1px, 30vh);
  }
  35% {
    transform: rotate(275deg) translate(3px, 35vh);
  }
  40% {
    transform: rotate(294deg) translate(5px, 40vh);
  }
  45% {
    transform: rotate(325deg) translate(3px, 45vh);
  }
  50% {
    transform: rotate(360deg) translate(1px, 50vh);
  }
  55% {
    transform: rotate(325deg) translate(0, 55vh);
  }
  60% {
    transform: rotate(294deg) translate(-1px, 60vh);
  }
  65% {
    transform: rotate(275deg) translate(-3px, 65vh);
  }
  70% {
    transform: rotate(200deg) translate(-5px, 70vh);
  }
  75% {
    transform: rotate(180deg) translate(-3px, 75vh);
  }
  80% {
    transform: rotate(150deg) translate(-1px, 80vh);
  }
  85% {
    transform: rotate(120deg) translate(0, 85vh);
  }
  90% {
    transform: rotate(90deg) translate(1px, 90vh);
  }
  95% {
    transform: rotate(45deg) translate(3px, 95vh);
  }
  100% {
    transform: rotate(0deg) translate(5px, 102vh);
  }
}